<template>
    <!-- logo和搜索框 -->
    <LogoAndSearch></LogoAndSearch>

    <!-- 顶部信息栏 -->
    <TopInfo></TopInfo>

    <!-- 导航菜单栏 -->
    <NavMenu></NavMenu>

    <div
        style="background-color: rgb(40,139,204);width: 80%;height:25px;position: absolute;left: 10%;top: 21%;color: white;">
        &emsp;列车信息（以下余票信息仅供参考）</div>

    <el-card class="box-card">


        <span style="font-size: large;font-weight: 900;">{{ ticketInfo.date }}</span> &emsp;
        <span style="font-size: large;font-weight: 900;"> {{ ticketInfo.trainno }}</span>次 &nbsp;
        <span style="font-size: large;font-weight: 900;">{{ ticketInfo.fromnm.slice(0, ticketInfo.fromnm.length - 1)
        }}</span>站
        <span style="font-size: large;font-weight: 900;"> （{{ ticketInfo.totime }}开）</span>
        <span style="font-size: large;font-weight: 900;"> —&nbsp;{{ ticketInfo.tonm.slice(0,
            ticketInfo.tonm.length - 1) }}</span>站
        <span> （{{ ticketInfo.ltime }}到）</span>
        <!-- 虚线 -->
        <div style="border-bottom: 2px dashed #ccc;margin-top: 10px;margin-bottom: 10px;"></div>

        <span> 商务座 ( <span style="color: orange;">{{ ticketInfo.bussmoney }} </span> ) {{ ticketInfo.bussiness }}
            张票</span>&emsp;
        <span> 一等座 ( <span style="color: orange;">{{ ticketInfo.onemoney }} </span> ) {{ ticketInfo.one }} 张票</span>&emsp;
        <span> 二等座 ( <span style="color: orange;">{{ ticketInfo.twomoney }} </span> ) {{ ticketInfo.two }} 张票</span>
        <br><br><br><br>
        <div style="color:  rgb(40,139,204);font-size: 14px;">*显示的卧铺票价均为上铺票价，供您参考。具体票价以您确认支付时实际购买的铺别票价为准。</div>
    </el-card>


    <div
        style="background-color: rgb(40,139,204);width: 80%;height:25px;position: absolute;left: 10%;top: 45%;color: white;">
        &emsp;乘客信息（填写说明）


        <el-button :icon="Search"
            style="background-color: #58acff;float: right;color: #fff;border-radius: 0%;height:20px;" />
        <input type="text" style="float: right;" placeholder="输入乘客姓名">


    </div>

    <el-card class="box-card2">
        <span style="font-size:30px;color: #58acff;"> <el-icon>
                <UserFilled />
            </el-icon> </span>
        <span style="position: relative;bottom: 4px;"> 乘车人</span>
        <br>
        <div style="position: relative;left: 35px;">
            <el-checkbox-group v-model="checkList" @change="modPassenger">
                <el-checkbox v-for="item in tableData" :key="item" :label="item.name" />

            </el-checkbox-group>
        </div>
        <!-- 虚线 -->
        <div style="border-bottom: 2px dashed #ccc;margin-top: 5px;margin-bottom: 5px;"></div>

        <el-table :data="tableDatas" style="width: 100%" max-height="200">

            <el-table-column label="序号" width="150" #default="scope">
                <span>{{ 1 + scope.$index }}</span>
            </el-table-column>

            <el-table-column label="席别" width="230">

                <template #default="scope">
                    <el-select v-model="scope.row.seattype" placeholder="请选择席别" style="width: 160px">
                        <el-option :label="'商务座(' + ticketInfo.bussmoney + ')'" :value="'01'" />
                        <el-option :label="'一等座(' + ticketInfo.onemoney + ')'" :value="'02'" />
                        <el-option :label="'二等座(' + ticketInfo.twomoney + ')'" :value="'03'" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="150" />
            <el-table-column prop="idtype" label="证件类型" width="220" />
            <el-table-column prop="id" label="证件号码" width="300" />
            <el-table-column label="操作" width="135">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">

                        <span style="font-size:20px;color: orange;"> <el-icon>
                                <DeleteFilled />
                            </el-icon></span>

                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <div style="font-size: 14px;position: absolute;bottom: 70px;left: 155px;">提交订单表示已阅读并同意 <span
            style="color:  rgb(40,139,204);">《国铁集团铁路旅客运输规程》 《服务条款》</span> </div>
    <div style="width: 500px;margin: 0 auto;text-align: center;position: relative;top: 620px;">
        <el-button type="info" style="width: 100px;margin-right: 20px;" @click="ret">上一步</el-button>
        <el-button type="warning" style="width: 100px;" @click="submit">提交订单</el-button>
    </div>
</template>

<script setup lang="ts">

import { Search, UserFilled, DeleteFilled } from '@element-plus/icons-vue'
import NavMenu from '../../components/home/NavMenu.vue'
import TopInfo from '../../components/home/TopInfo.vue'
import LogoAndSearch from '../../components/home/LogoAndSearch.vue'
import { useRoute } from "vue-router"
import { useRouter } from "vue-router";
import { ref } from 'vue'
import { usePassengerStore } from '../../stores/passenger'
import { useTicketStore } from '../../stores/ticket'





// 引入storeToRefs
import { storeToRefs } from 'pinia'
import { ElMessage } from 'element-plus'

// 实例化对象
const passengerStore = usePassengerStore()
const ticketStore = useTicketStore()


const { tableData, checkList } = storeToRefs(passengerStore)

const { ticket, fromnm, tonm, fromtime, totime, passenger, money } = storeToRefs(ticketStore)
// 乘车人信息
console.log(tableData.value);

// 接收车票信息
const route = useRoute()
const router = useRouter()
let ticketInfo = ref(route.query);

// 乘车人姓名列表
// let checkList = ref([])

// 已选择的乘车人
const tableDatas = ref([])

// 删除已选的乘车人
const deleteRow = (index) => {
    tableDatas.value.splice(index, 1)
    checkList.value = []
    tableDatas.value.forEach(item => {
        checkList.value.push(item.name)
    })
}

// 添加或减少乘车人
const modPassenger = () => {
    tableDatas.value = []
    console.log(checkList.value);
    checkList.value.forEach(elt => {
        tableData.value.forEach(item => {
            if (elt == item.name) {
                tableDatas.value.push(item)
            }
        })
    })
}

const ret = () => {
    router.go(-1)
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// async function submit() {

//     if (tableDatas.value.length == 0) {
//         ElMessage.error('请选择乘车人！');
//     }
//     else {
//         let submitFlag = 0;
//         tableDatas.value.forEach((element) => {
//             if (element.seattype == null || element.seattype == '') {
//                 submitFlag++;
//             }
//         })
//         if (submitFlag) {
//             ElMessage.error('请选择席位类型！');
//         }
//         else {
//             console.log("tableDatas.value: "+tableDatas.value);
//             console.log("ticketInfo.value: "+ticketInfo.value);
//             //逐个乘车人寻找座位
//             tableDatas.value.forEach((element,index) => {
//                 console.log("element "+index+" :"+element);
                
//                 var v1 = element
//                 ticket.value.carriage = v1.seattype
//                 ticket.value.trainno = ticketInfo.value.trainno
//                 ticket.value.date = ticketInfo.value.date.slice(5, 10)
//                 fromnm.value = ticketInfo.value.fromnm
//                 tonm.value = ticketInfo.value.tonm
//                 fromtime.value = ticketInfo.value.totime
//                 totime.value = ticketInfo.value.ltime
//                 passenger.value = v1.name

//                 console.log("ticket.value.carriage"+ticket.value.carriage);
//                 if (v1.seattype == '01') {
//                     money.value = ticketInfo.value.bussmoney
//                 }
//                 else if (v1.seattype == '02') {
//                     money.value = ticketInfo.value.onemoney
//                 }
//                 else {
//                     money.value = ticketInfo.value.twomoney
//                 }
                
//                 // 发送请求
//                 ticketStore.querySeat();
                
//             })
//             await sleep(100)
//             ElMessage.success("提交订单成功")
//             router.push("/orders")
//         }
//     }


// }

async function submit() {
    if (tableDatas.value.length == 0) {
        ElMessage.error('请选择乘车人！');
    }
    else {
        let submitFlag = 0;
        for (const element of tableDatas.value) {
            if (element.seattype == null || element.seattype == '') {
                submitFlag++;
            }
        }
        if (submitFlag) {
            ElMessage.error('请选择席位类型！');
        }
        else {
            console.log("tableDatas.value: "+tableDatas.value);
            console.log("ticketInfo.value: "+ticketInfo.value);
            //逐个乘车人寻找座位
            for (const [index, element] of tableDatas.value.entries()) {
                console.log("element "+index+" :"+element);
                
                var v1 = element
                ticket.value.carriage = v1.seattype
                ticket.value.trainno = ticketInfo.value.trainno
                ticket.value.date = ticketInfo.value.date.slice(5, 10)
                fromnm.value = ticketInfo.value.fromnm
                tonm.value = ticketInfo.value.tonm
                fromtime.value = ticketInfo.value.totime
                totime.value = ticketInfo.value.ltime
                passenger.value = v1.name

                console.log("ticket.value.carriage"+ticket.value.carriage);
                if (v1.seattype == '01') {
                    money.value = ticketInfo.value.bussmoney
                }
                else if (v1.seattype == '02') {
                    money.value = ticketInfo.value.onemoney
                }
                else {
                    money.value = ticketInfo.value.twomoney
                }
  

                // 发送请求并等待返回结果
                await ticketStore.querySeat();

                // 继续下一次循环
            }
            await sleep(100)
            ElMessage.success("提交订单成功")
            router.push("/orders");
        }
    }
}


</script>

<style scoped>
.hackhome {
    border-bottom: 1px dashed #000;
    height: 50px;
    width: 350px
}

.box-card {
    width: 79.9%;
    height: 150px;
    position: absolute;
    left: 10%;
    top: 24%;
    border-color: rgb(40, 139, 204);
}

.box-card2 {
    width: 79.9%;
    height: 300px;
    position: absolute;
    left: 10%;
    top: 48%;
    border-color: rgb(40, 139, 204);
}
</style>
